<template>
  <div id="orderManager">
    <el-row class="header" type="flex" align="middle" justify="end">
      <el-col class="paramsPanel">
        <el-row type="flex" align="middle">
          <span id="headTitle">订单中心</span>
        </el-row>
      </el-col>
      <el-col class="paramsPanel" style="text-align: end;">
        <el-dropdown @command="changeStatus">
          <el-button size="small" type="primary">
            <span v-text="selectStatus.statusText"></span><i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item :key="item.val" v-for="item in selectStatus.command" :command="item">{{item.text}}</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>

        <!-- 关键字搜索 -->
        <el-autocomplete @keyup.enter.native="doSearchOrder" v-on:keyup.enter="doSearchOrder" style="width: 70%;" size="small"
          :trigger-on-focus="false" popper-class="my-autocomplete" v-model="params.keyword" :fetch-suggestions="querySearch"
          placeholder="请输入关键字" @select="handleSelect">
          <el-button slot="prepend" @click="doSearchOrder" icon="el-icon-search"></el-button>
          <template slot-scope="{ item }">
            <el-tooltip effect="dark" :content="item.productName" placement="left">
              <el-row type="flex" align="middle">
                <div style="text-overflow: ellipsis; overflow: hidden;font-weight: bold;">{{ item.productName }}</div>
              </el-row>
            </el-tooltip>
          </template>
        </el-autocomplete>
      </el-col>
    </el-row>
    <el-row class="pagination" style="">
      <el-pagination :background="true" @size-change="handleSizeChange" :page-count="5" @current-change="handleCurrentChange"
        :page-sizes="pageSizes" :page-size="params.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="params.total"
        :current-page="params.pageNum">
      </el-pagination>
    </el-row>
    <el-row>
      <!-- 表格 -->
      <el-table @sort-change="sortChange" :data="showOrderDetails" :row-style="{'background-color': '#F2F6FC'}"
        header-cell-class-name="TableHeader" :cell-style="{'font-weight': 'bold'}">
        <!-- <el-table-column type="index" /> -->

        <el-table-column show-overflow-tooltip prop="orderDetailId" label="交易号" width="130"></el-table-column>
        <el-table-column show-overflow-tooltip label="买家" width="150">
          <template slot-scope="scope">
            <el-tag type="primary" v-text="scope.row.order.user.userName" size="small" effect="dark"></el-tag>
            <!-- <el-tag type="danger" v-if="scope.row.productInventory<50" size="mini" effect="dark">库存不足</el-tag> -->
            <!-- <el-tag size="mini" type="primary" effect="dark">{{scope.row.type.typeName}}</el-tag> -->
          </template>
        </el-table-column>
        <el-table-column type="expand">
          <!-- 详细状态模板 -->
          <template slot-scope="scope">
            <!--  <el-row type="flex">
              <el-image fit="scale-down" style="height: 400px;width: 800px;" :src="'http://localhost:8080/fileDownload/getProductFace?productsLogo='+scope.row.productPicture"
                :preview-src-list="['http://localhost:8080/fileDownload/getProductFace?productsLogo='+scope.row.productPicture]">
              </el-image>
              <el-form class="prodInfo" size="medium" label-position="left" label-width="60px">
                <el-form-item label="商品名">
                  <el-input v-model="scope.row.productName"></el-input>
                </el-form-item>
                <el-form-item label="价格" min="0">
                  <el-input-number :min="0" v-model="scope.row.productPrice"></el-input-number>
                </el-form-item>
                <el-form-item label="库存">
                  <el-input-number :min="0" v-model="scope.row.productInventory"></el-input-number>
                </el-form-item>
                <el-form-item label="简介">
                  <el-input type="textarea" :rows="4" resize="none" v-model="scope.row.productIntroduce"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="updateProduct(scope.row)">提交修改</el-button>
                </el-form-item>
              </el-form>
            </el-row> -->
          </template>
        </el-table-column>
        <el-table-column show-overflow-tooltip prop="product.productName" label="商品名" sortable></el-table-column>
        <el-table-column show-overflow-tooltip prop="count" label="数量" width="130" sortable></el-table-column>
        <el-table-column show-overflow-tooltip prop="totalPrice" label="总价" width="130" sortable></el-table-column>
        <el-table-column show-overflow-tooltip label="状态">
          <template slot-scope="scope">
            <el-tag :type="status(scope.row.status).type" v-text="status(scope.row.status).text" size="mini" effect="dark"></el-tag>
            <!-- <el-tag type="danger" v-if="scope.row.productInventory<50" size="mini" effect="dark">库存不足</el-tag> -->
            <!-- <el-tag size="mini" type="primary" effect="dark">{{scope.row.type.typeName}}</el-tag> -->
          </template>
        </el-table-column>
        <el-table-column show-overflow-tooltip label="操作" width="100">
          <template slot-scope="scope">
            <el-button v-if="scope.row.status===1" v-text="'发货'" :type="status(scope.row.status).type" @click="handleDelete(scope.$index, scope.row)"></el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <el-row class="pagination" style="">
      <el-pagination :hide-on-single-page="hideOnSinglePage" :background="true" @size-change="handleSizeChange"
        :page-count="5" @current-change="handleCurrentChange" :page-sizes="pageSizes" :page-size="params.pageSize"
        layout="total, sizes, prev, pager, next, jumper" :total="params.total" :current-page="params.pageNum">
      </el-pagination>
    </el-row>
  </div>

</template>

<script>
  const axios = require('axios')
  export default {

    name: "orderManager",
    data() {
      return {
        autoComProducts: [],
        showOrderDetails: [],
        selectStatus: {
          statusText: "全部",
          command: [{
            text: "全部",
            val: null
          }, {
            text: "待付款",
            val: 0
          }, {
            text: "待发货",
            val: 1
          }, {
            text: "已发货",
            val: 2
          }, {
            text: "已完成",
            val: 3
          }]
        },
        hideOnSinglePage: false,
        pageSizes: [15, 30, 60, 120],
        params: {
          status: null,
          keyword: '',
          total: 0,
          pageNum: 1,
          pageSize: 15,
          sellerAccount: this.$store.getters.seller.sellerAccount,
          orderBy: '',
          desc: true
        }
      }
    },
    mounted() {
      this.doQueryOrderDetails()
    },
    methods: {
      sortChange({
        column,
        prop,
        order
      }) {
        let i = prop.split('.');
        if (order === 'descending') {
          this.params.desc = true
          this.params.orderBy = i[i.length - 1]
        } else if (order === 'ascending') {
          this.params.desc = false
          this.params.orderBy = i[i.length - 1]
        } else {
          this.params.orderBy = null
        }
        this.doQueryOrderDetails()
      },
      changeStatus(command) {
        this.params.status = command.val
        this.selectStatus.statusText = command.text
        this.params.pageNum = 1
        this.doQueryOrderDetails()
      },
      status(s) {
        if (s === 0) {
          return {
            text: "待付款",
            type: "warnning"
          }
        } else if (s === 1) {
          return {
            text: "已付款",
            type: "primary"
          }
        } else if (s === 2) {
          return {
            text: "已发货",
            type: "primary"
          }
        } else if (s === 3) {
          return {
            text: "已完成",
            type: "success"
          }
        }

      },
      doSearchOrder() {
        this.doQueryOrderDetails()
      },
      handleSelect(item) {
        this.params.keyword = item.productName
        this.doQueryOrderDetails()
      },
      // 查询自动补齐
      querySearch(queryString, cb) {
        this.queryAllProd().then(res => {
          let autoComProducts = res.data.list
          var results = queryString ? autoComProducts.filter(this.createFilter(queryString)) : autoComProducts;
          cb(results);
        })
      },
      // 自动补齐方法
      createFilter(queryString) {
        return (restaurant) => {
          return (restaurant.productName.toLowerCase().indexOf(queryString.toLowerCase()) !== -1 || restaurant.type.typeName
            .toLowerCase().indexOf(queryString.toLowerCase()) !== -1);
        };
      },
      queryAllProd() {
        return axios.get("http://localhost:8080/product/getByPageProduct", {
          params: {
            pageNum: 1,
            pageSize: 500,
            keyword: '',
            sellerAccount: this.$store.getters.seller.sellerAccount
          }
        })
      },
      doQueryOrderDetails() {
        axios.get("http://localhost:8080/order/getOrderBySeller", {
          params: this.params
        }).then(res => {
          this.showOrderDetails = res.data.list
          this.params.total = res.data.total
          if (res.data === '')
            this.params.total = 0
        }).catch(err => {

        })
      },
      handleSizeChange(val) {
        this.params.pageNum = 1
        this.params.pageSize = val
        this.doQueryOrderDetails()
      },
      handleCurrentChange(val) {
        this.params.pageNum = val
        this.doQueryOrderDetails()
      },

    }

  }
</script>

<style>
  #orderManager {
    background-color: #FFFFFF;
  }

  #headTitle {
    margin: 5px;
    font-size: 24px;
    font-weight: bold;
    padding: 8px;
    border-radius: 6px;
    background-color: #409EFF;
    color: white
  }

  .pagination {
    z-index: 1;
    text-align: center;
    padding: 10px;
  }

  .TableHeader {
    font-size: 20px;
  }
</style>
